import React, { useState } from 'react';
import { FieldProps } from '@rjsf/utils';
import { Icon } from '@amcax/base';
import { IconContent } from './iconContent';
import { SelectionContent } from './content';
import styles from './styles.module.scss';
// 选择器
export const MultipleChoice = ({
  schema,
  formData,
  onChange,
  onFocus,
  uiSchema,
  disabled,
}: FieldProps<string[]>) => {
  const { options = [], mustKeepOne = true } = uiSchema['ui:options'] ?? {};
  const isPicker = uiSchema['ui:options']?.isPicker;
  const [values, setValues] = useState(formData);
  return (
    <SelectionContent
      disabled={disabled}
      layout={uiSchema['ui:layout']}
      schema={schema}
      uiSchema={uiSchema}
      isPicker={isPicker}
      onFocus={onFocus}
      formData={formData}>
      <div className={styles._diver}></div>
      {(options as Array<any>).map((item, index) => {
        return (
          <IconContent
            key={index}
            disabled={disabled ? disabled : item.disabled}
            isSelected={values.includes(item.const)}
            onClick={() => {
              if (item.disabled || disabled) {
                return;
              }
              setValues((state) => {
                const temp = new Set(state);
                if (temp.has(item.const) && !(mustKeepOne && temp.size === 1)) {
                  temp.delete(item.const);
                } else {
                  temp.add(item.const);
                }
                onChange(Array.from(temp));
                return Array.from(temp);
              });
            }}>
            <Icon
              name={item.icon}
              style={{ fontSize: 14 }}
            />
          </IconContent>
        );
      })}
    </SelectionContent>
  );
};

/**
 * @description: 多选
 * 'ui:options': {
      isPicker: true, // 是否显示选择器 选填
      mustKeepOne: false, // 必须保持一个 选填
      layout: [1, 1], // 布局 选填
      options: [
        {
          const: '1',
          icon: 'commands/topo/side-point',
        },
        {
          const: '2',
          icon: 'commands/topo/side-mesh',
        },
        {
          const: '3',
          icon: 'commands/topo/u-parameter',
        },
        {
          const: '4',
          icon: 'commands/topo/dscontinuous',
        },
      ],
    },
 * 
 * */
